<!--
 * @Description: 当前任务
 -->
<template>
  <div>
    <template v-if="listTotal > 0">
      <div class="tasks" v-for="taskItem in taskList" :key="taskItem.id" @click="taskDetail(taskItem.taskNo)">
        <div class="taskInfo">
          <div class="taskName">{{taskItem.taskName}}</div>
          <div class="companyName">{{taskItem.company.companyName}}</div>
        </div>
        <div class="taskMoney">¥ {{taskItem.taskMoney}}</div>
        <div class="taskStatus" v-if="rollkey === 1">进行中</div>
        <div class="taskStatus" v-else>
          <van-button type="info" size="mini" v-if="taskItem.taskStatus === 1" @click.stop="submit(taskItem.taskNo)">提交</van-button>
          <van-button type="info" disabled size="mini" v-else-if="taskItem.taskStatus === 2">待结算</van-button>
          <van-button type="info" disabled size="mini" v-else-if="taskItem.taskStatus === 3">已结算</van-button>
          <van-button type="info" disabled size="mini" v-else-if="taskItem.taskStatus === 4">待确认</van-button>
        </div>
      </div>
    </template>
    <van-empty v-else-if="listTotal == 0" description="暂无任务～" />
    <van-empty v-else-if="listTotal == -1" image="error" description="获取记录出错" />
    <!-- <div class="btnArea">
      <van-button type="info" block size="small" to="/recordTask">查看所有任务</van-button>
    </div> -->
  </div>
</template>

<script>
import { checkTaskRecord } from '@/api/check'
import { toSubTask } from '@/api/account'
import { Toast, Dialog } from 'vant'
export default {
  data () {
    return {
      rollkey: parseInt(localStorage.getItem('ROLLKEY')),
      taskList: [],
      listTotal: null
    }
  },
  methods: {
    taskDetail (taskNo) {
      this.$router.push({
        name: 'detailTask',
        query: {
          apply: true,
          id: taskNo
        }
      })
    },
    getTaskRecord () {
      const $this = this
      Toast.loading({
        forbidClick: true,
        duration: 0
      })
      checkTaskRecord(0, 50).then(res => {
        console.log('checkTaskRecord', res)
        Toast.clear()
        $this.listTotal = res.data.data.total
        $this.taskList = res.data.data.list
      }).catch(() => {
        Toast.clear()
        $this.listTotal = -1
      })
    },
    submit (taskNo) {
      const $this = this
      Dialog.confirm({
        title: '确认完成吗？',
        confirmButtonText: '提交',
        cancelButtonText: '取消'
      }).then(() => {
        toSubTask({
          'taskNo': taskNo
        }).then(res => {
          console.log('toSubTask', res)
          if (res.data.code === 10000) {
            Toast.success('提交成功')
            $this.getTaskRecord()
          } else {
            Toast.fail(res.data.message)
          }
        }).catch(() => {
          Toast.fail('网络不给力，稍后再来')
        })
      }).catch(() => {
      // on cancel
      })
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.getTaskRecord()
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.tasks{
  background: #ffffff;
  width: 350px;
  height: 60px;
  margin: 10px auto;
  padding: 0 10px;
  box-shadow: 0px 2px 3px #00000066;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  border-radius: 5px;
}
.taskInfo{
  width: 180px;
}
.taskInfo div{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.taskInfo .companyName{
  font-size: 11px;
  margin-top: 5px;
}
.taskMoney{
  width: 80px;
}
.taskStatus{
  width: 50px;
}
</style>
